﻿{% extends "base.html" %}



{% block css %}
<link rel="stylesheet" href="/static/css/admin.css">
<link rel="stylesheet" href="/static/ztree3/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
{% endblock %}


{% block center %}


<!--头部导航-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-body">
    <ol class="breadcrumb" style="margin-bottom: 0px;background-color: #FFFFFF;">
      <li><a href="/" style="color: #377CD8;">首页</a></li>
      <li><a href="javascript:;">后台管理</a></li>
      <li class="active">{{ title }}</li>
    </ol>
  </div>
</div>



<!--用户信息-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-heading">
      <div class="row" style="padding-top:5px;padding-left:10px;">
          <div class="col-sm-6">

              <a href="javascript:;" class="btn btn-sm btn-success" data-toggle="modal" data-target="#permsModal"> 添加权限 </a>

          </div>
      </div>

  </div>
  <div class="panel-body" >

            <div style="margin-bottom: 10px;">

                <div class="col-sm-12">


                    <table class="table table-hover table-bordered">
                      <thead>
                        <tr style="background-color: #f5f5f5;">
                          <th>标题</th>
                          <th>类型</th>
                          <th>地址</th>
                          <th>权限ID</th>
                          <th>父节点ID</th>
                          <th>图标</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="perms_table">

                      {% for perms in perms_info %}

                      {% if perms.perms_type == "一级菜单" %}
                        <tr style="background-color: #60e860;">

                          <td><i class="fa fa-list" style="margin-right:20px"></i>{{ perms.perms_title }}</td>
                          <td>{{ perms.perms_type }}</td>
                          <td>{{ perms.perms_url }}</td>
                          <td>{{ perms.perms_num }}</td>
                          <td>{{ perms.pmenu_id }}</td>
                          <td><span class="{{ perms.perms_icon }}"></span></td>

                          <td>
                              <a  href="javascript:;" style="text-decoration:none;" name="edit-perms" perms_id="{{ perms.perms_id }}" data-toggle="tooltip" data-placement="left" title="修改"> <span class="fa fa-pencil"></span></a>&nbsp;

                              <a href="javascript:;" style="text-decoration:none;" name="del-perms" perms_id="{{ perms.perms_id }}" data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span> </a>


                          </td>
                        </tr>
                      {% elif  perms.perms_type == "二级菜单" %}
                        <tr style="background-color:#b2f5d0;">
                          <td style="padding-left:30px;"><i class="fa fa-list-ul" style="margin-right:20px"></i>{{ perms.perms_title }}</td>
                          <td>{{ perms.perms_type }}</td>
                          <td>{{ perms.perms_url }}</td>
                          <td>{{ perms.perms_num }}</td>
                          <td>{{ perms.pmenu_id }}</td>
                          <td><span class="{{ perms.perms_icon }}"></span></td>

                          <td>

                              <a  href="javascript:;" style="text-decoration:none;" name="edit-perms" perms_id="{{ perms.perms_id }}"  data-toggle="tooltip" data-placement="left" title="修改"> <span class="fa fa-pencil"></span></a>&nbsp;

                              <a href="javascript:;" style="text-decoration:none;" name="del-perms" perms_id="{{ perms.perms_id }}" data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span> </a>

                          </td>
                        </tr>

                        {% else %}
                        <tr>
                          <td style="padding-left:50px;"><i class="fa fa-bars" style="margin-right:20px"></i>{{ perms.perms_title }}</td>
                          <td>{{ perms.perms_type }}</td>
                          <td>{{ perms.perms_url }}</td>
                          <td>{{ perms.perms_num }}</td>
                          <td>{{ perms.pmenu_id }}</td>
                          <td><span class="{{ perms.perms_icon }}"></span></td>

                          <td>
                              <a  href="javascript:;" style="text-decoration:none;" name="edit-perms" perms_id="{{ perms.perms_id }}" data-toggle="tooltip" data-placement="left" title="修改"> <span class="fa fa-pencil"></span></a>&nbsp;

                              <a href="javascript:;" style="text-decoration:none;" name="del-perms" perms_id="{{ perms.perms_id }}" data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span> </a>

                          </td>
                        </tr>

                        {% endif %}
                      {% endfor %}

                      </tbody>
                    </table>

                    <div class="text-right" style="margin-top:-30px;padding-right:9%">
                      <ul class="pagination" id="pagination">
                      </ul>
                    </div>
                </div>

            </div>

  </div>
</div>


{% endblock %}


<!-- Modal -->
{% block modal %}

<div class="modal fade" id="permsModal" tabindex="-1" role="dialog" aria-labelledby="permsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="permsModalLabel">添加权限</h4>
      </div>
      <div class="modal-body">

          <div class="form-group">
            <label >权限标题</label>
            <input  class="form-control"  placeholder="权限标题" id="perms-title">
          </div>
          <div class="form-group">
            <label >权限类型</label>
                <select class="form-control" id="perms-type">
                    <option value="一级菜单">一级菜单</option>
                    <option value="二级菜单">二级菜单</option>
                    <option value="功能">功能</option>
                </select>
          </div>


          <div class="form-group" style="display:none" id="pmenu-div">
            <label >父节点</label>
              <select class="form-control" id="pmenu-id">
                  {% for perms in perms_list %}
                  <option value="{{ perms.perms_id }}" pmenu_id="{{ perms.pmenu_id }}">{{ perms.perms_title }}</option>
                  {% endfor %}
              </select>
          </div>



          <div class="form-group">
            <label >地址</label>
            <input class="form-control"  placeholder="/url/" id="perms-url">
          </div>

          <div class="form-group" id="icon-div">
            <label >菜单图标</label>
              <input type="text" class="form-control"  placeholder="fa-(图标名称)" id="menu-icon-input">
              <table class="table" style="margin-top:5px;">
                <tbody id="icon-table">
                    <tr>
                      <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-dashboard"></span>

                      </td>


                      <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-desktop"></span>

                      </td>

                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-code"></span>

                      </td>

                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-address-card"></span>

                      </td>
                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-bars"></span>

                      </td>
                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-wrench"></span>

                      </td>

                    </tr>

                    <tr>
                      <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-area-chart"></span>

                      </td>


                      <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-folder-open"></span>
                      </td>

                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box"/>
                        <span class="fa fa-lg fa-cog"></span>

                      </td>

                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-home"></span>

                      </td>
                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg  fa-bar-chart"></span>

                      </td>
                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-linux" icog="fa-wrench"></span>

                      </td>

                    </tr>

                 </tbody>

              </table>

          </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-perms">提交</button>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="edit-permsModal" tabindex="-1" role="dialog" aria-labelledby="edit-permsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="edit-permsModalLabel">添加权限</h4>
      </div>
      <div class="modal-body">

         <form>
          <div class="form-group">
            <label >权限标题</label>
            <input  class="form-control"  placeholder="权限标题" id="edit-perms-title">
          </div>
          <div class="form-group">
            <label >权限类型</label>
                <select class="form-control" id="edit-perms-type">
                    <option value="一级菜单">一级菜单</option>
                    <option value="二级菜单">二级菜单</option>
                    <option value="功能">功能</option>
                </select>
          </div>


          <div class="form-group" style="display:none" id="edit-pmenu-div">
            <label >父节点</label>
              <select class="form-control" id="edit-pmenu-id">
                  {% for perms in perms_list %}
                  <option value="{{ perms.perms_id }}" pmenu_id="{{ perms.pmenu_id }}">{{ perms.perms_title }}</option>
                  {% endfor %}
              </select>
          </div>



          <div class="form-group">
            <label >地址</label>
            <input class="form-control"  placeholder="/url/" id="edit-perms-url">
          </div>


          <div class="form-group" id="edit-icon-div">
            <label >菜单图标</label>
              <input type="text" class="form-control"  placeholder="fa-(图标名称)" id="edit-menu-icon-input">
              <table class="table" style="margin-top:5px;">
                <tbody id="dit-icon-table">
                    <tr>
                      <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-dashboard"></span>

                      </td>


                      <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-desktop"></span>

                      </td>

                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-code"></span>

                      </td>

                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-address-card"></span>

                      </td>
                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-bars"></span>

                      </td>
                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-wrench"></span>

                      </td>

                    </tr>

                    <tr>
                      <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-area-chart"></span>

                      </td>


                      <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-folder-open"></span>
                      </td>

                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box"/>
                        <span class="fa fa-lg fa-cog"></span>

                      </td>

                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-home"></span>

                      </td>
                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg  fa-bar-chart"></span>

                      </td>
                        <td style="padding-left:5px;">
                        <input type="radio" name="check_box" />
                        <span class="fa fa-lg fa-linux" icog="fa-wrench"></span>

                      </td>

                    </tr>

                 </tbody>

              </table>

          </div>

        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-edit-perms">提交</button>
      </div>
    </div>
  </div>
</div>



{% endblock  %}

{% block js %}
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="/static/js/rbac.js"></script>

    <script type="text/javascript" >
        $(function () {
          $('[data-toggle="tooltip"]').tooltip()
        });


        $("#perms-type").change(function(){

            var menu_level = $(this).val();

            if (menu_level == '一级菜单'){
                $("#icon-div").css("display",'block')
            }
            else{
                $("#icon-div").css("display",'none')

            }
        });


        $("input[name='check_box']").click(function(){
            var menu_icon=$(this).siblings('span').attr('class');
            $("#menu-icon-input").val(menu_icon);
        });



        $("input[name='check_box']").click(function(){
            var menu_icon=$(this).siblings('span').attr('class');
            $("#edit-menu-icon-input").val(menu_icon);
        });




//前端分页
var limit = 13; //每页显示数据条数
var total = $('#perms_table').find('tr').length;
var allPage = total%limit>0?parseInt(total/limit)+1:parseInt(total/limit);

function doPage(n){
    if(allPage>1){
        var prevPage='',nextPage='',pageHtml='';

        if (n===1) {
            prevPage = '<li class="disabled"><a href="javascript:;">上一页</a></li>';
            nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>';
        } else if(n===allPage){
            prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>';
            nextPage = '<li class="disabled"><a href="javascript:;">下一页</a></li>';
        } else {
            prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>';
            nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>';
        }

        if (n<=5){
            for(var i=1;i<=5;i++){
                if (n===i) {
                    pageHtml += '<li class="active"><a href="javascript:;">'+ i +'</a></li>';
                }else{
                    if(i<=allPage) {
                        pageHtml += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>';
                    }
                }

            }
        }else{
            for(var i=1;i<=5;i++){

                cur_page = parseInt(parseInt((n-1)/5)*5);

                if (n===(cur_page+i)){
                    pageHtml += '<li class="active"><a href="javascript:;">'+ (cur_page+i) +'</a></li>';
                }else{
                    if((i+cur_page)<=allPage){
                        pageHtml += '<li data-page="'+ (i+cur_page) +'"><a href="javascript:;">'+ (i+cur_page) +'</a></li>';
                    }
                }

            }

        }


        $('#pagination').html(prevPage+pageHtml+nextPage);
    }

    $('#perms_table').find('tr').hide();
    if(n===1){
        $('#perms_table').find('tr:lt('+ limit +')').show();
    }else{
        $('#perms_table').find('tr:gt('+ ((n-1)*limit-1) +'):lt('+ limit +')').show();
    }

}

doPage(1);

$('#pagination').on('click', 'li a', function(event) {
    event.preventDefault();
    var curr = parseInt($(this).parent().data('page'));

    if (!isNaN(curr)) {
        doPage(curr);
    }
});


    </script>

{% endblock %}


